مقدماتی تا پیشرفته تالیف و ترجمه : احمد بادپی – (X)HTML آموزش
١به نام خداHTML AND XHTML مرجع آموزشبرگرفته ازکتاب هاي :Beginning HTML, XHTML, CSS and JavaScriptBy : Jon DuckettThe Ultimate HTML ReferenceBy : Lan LioydوWWW.W3SCHOOLS.COMآشنایی با مفاهیم پایه طراحی وبXHTML و HTML انواع نسخه ها و تفاوت هايصفت) ها ) Attribute و Tag آشنایی با مفاهیمها ، صفت ها و کاربردهایشان Tag آشنایی با انواعآشنایی با به کارگیري جداول ، فرم ها و لیستها در صفحات وب(FRAMESET) آشنایی با نحوه ایجاد صفحات چند گانهارائه انواع مثال ها و نمونه کد هاو ...تالیف و ترجمه : احمد بادپیدانشگاه پیام نور مرکز آران و بیدگلمقدماتی تا پیشرفته تالیف و ترجمه : احمد بادپی – (X)HTML آموزش٢XHTML و HTML آموزشقبل از هر چیز می بایست با یکسري مفاهیم و اصطلاحاتی که در ادامه به آن ها نیاز داریم آشنا شویم :اینترنت : شبکه اي از کامپیوتر ها که یکسري اطلاعات را بین یکدیگر منتقل می کنند . به مدل ساده زیر نگاه کنید :همان اطلاعاتی هستند که بین کامپیوتر هاي اینترنت منتقل می شوند . این : (Information Resource) منابع اطلاعاتیاطلاعات می توانند شامل هرگونه فایلی با فرمت هاي گوناگون باشند . مانند عکس ها ، فیلم ها ، صدا ها ، متن ها و ...کامپیوتر هاي داخل شبکه اینترنت را به دو دسته تقسیم می کنند :کامپیوتر هایی که منابع اطلاعاتی را در اختیار دارند و وظیفه دارند که آن ها در اختیار سایر کامپیوتر ها : (server) سرویس دهندهنامیده می شوند . درواقع این کامپیوتر ها وظیفه سرویس دهی به سایر کامپیوتر ها را بر عهده دارند . server قرار دهندبه کامپیوتر هایی که منابع اطلاعاتی را از سرویس دهنده ها دریافت می کنند سرویس گیرنده (مشتري) : (Client) سرویس گیرندهمی گویند .اصطلاحا به این مکانیزم و ساختار در اینترنت که یک کامپیوتر نقش سرویس دهنده و کامپیوتر هاي دیگر نقش سرویس گیرنده را بازيگفته می شود . (server-client) می کنند معماري مشتري –سرویس دهندهسایت : مجموعه اي از چندین فایل با انواع گوناگون همچون فایل هاي متنی ، تصویري ، صوتی و ... که درواقع همان منابع اطلاعاتیروي اینترنت هستند .به مقدار فضایی از حافظه سرویس دهنده ها که براي ذخیره منابع اطلاعاتی مورد استفاده قرار می گیرد گفته می شود : (Host) هاست.به سروري که محتویات یک سایت را در خود نگه داري می کند وب سرور آن سایت می گویند . : Webserverبه درخواستی که از طرف سرویس گیرنده ها براي دریافت یک فایل به سرویس دهنده اي خاص ارسال می شود گفته می : Requestشود .به پاسخی که یک سرویس دهنده در جواب درخواست یک سرویس گیرنده می دهد گفته می شود . : Responseمرورگر) : نرم افزاري است که وظیفه ارسال درخواست ها به سرویس دهنده و دریافت پاسخ ها از آن بر عهده ) Web browserSafari ، Opera ، Mozilla Firefox ، Internet Explorer دارد مرورگر گفته می شود . از رایج ترین مرورگرها می توان ازهم می گویند . UserAgent نام برد . به مرورگر ها Google Chrome وگفته می شود . client به server به عمل انتقال یک فایل از : Downloadِگفته می شود . server به client یعنی انتقال فایل از download به عکس عمل : Uploadمقدماتی تا پیشرفته تالیف و ترجمه : احمد بادپی – (X)HTML آموزش٣براي ارسال منابع اطلاعاتی در پهنه وسیعی از مخاطبان نیاز به یک زبان واحد جهانی است که براي تمام کامپیوتر ها قابل فهم باشد . ایناست . HTML زبانبه نویسندگانش امکانات زیر را می دهد: HTMLبه اشتراك گذاري منابع اطلاعاتی به صورت آنلاین و از طریق متن ها ، جدول ها ، لیست ها ، عکس ها و .... در یافت آن ها از طریق لینک ها و کلیک کردن بر روي یک دکمه طراحی فرم ها به منظور تبادل اطلاعات با کامپیوتر هاي راه دور و به جهت جستجو ، ذخیره ، و مرتب سازي آنها و ... قرار داردن کلیپ هاي ویدئویی ، صوتی و دیگر برنامه هاي کاربردي در داخل اسنادشان : HTML تاریخچهدر خلال دهه 90 میلادي همراه با گسترش وب، شکوفا شد. این زبان توسط مرورگر Tim Berners-Lee توسط HTMLدر چند مدل منتشر می شد که آن بستگی داشت به سازنده فایل و HTML معروفیت خاصی پیدا کرد. در آن زمان Mosaicانجمنهایی که در زمینه وب فعالیت داشتند.منتشر شد، ولی استقبالی از آن نشد. در HTML گسترش یافت و بلافاصله در همان سال 3.0 HTML در نوامبر 1995 نسخه 2.0HTML شروع به فعالیت بر روي نسخه این زبان کرد که حاصل کار آنها در 14 ژانویه 1997 انتشار W3C سال 1996 انجمن3.02 بود. این نسخه توانست رضایت اکثریت را جلب کند چون هماهنگی بیشتري با مرورگرهاي مختلف در سیستمهاي عامل متفاوتداشت. در تمام نسخه هاي این زبان ، سعی بر این شده بود تا نظر کسانی که در زمینه وب سرمایه گذاري کرده بودند جلب شود و برنامهبراي اهداف گسترده تري ، در وب HTML هاي تولید شده براي وب بتوانند مدت طولانی تري قابل استفاده باشند. به همین منظورتوسعه یافت تا در کلیه سیستمهاي اطلاع رسانی و الکترونیکی کوچک و بزرگ با بکار بردن گرافیک و رنگها، قابلیت بهره برداري بیشتريداشته باشد.در وب منتشر شد و در همین بین شرکتهاي تولید کننده مرورگر وب یکسري مشخصات HTML در 18 دسامبر 1997 نسخه 4.0مورد تایید قرار W3C منحصر به خود را به این نسخه اضافه کردند که قابل اجرا در مرورگرهاي دیگر نبود. بعضی از این تغییرات درمرورگرها مجبور به تغییر شدند تا با تحولات جدید سازگار شوند. HTML گرفت اما بعضی دیگر نه. با تغییراتبود که با کمی تغییر و رفع یکسري HTML در تاریخ 24 آوریل 1998 در این نسخه تجدید نظر شد و حاصل آن پیدایش 4.01برسمیت شناخته شد و این انجمن استفاده از آنرا به توسعه دهندگان و طراحان وب ، توصیه کرد. W3C مشکلات، درHTML 4.0به دلیل ویژگی هایی که نسبت به نسخ قبلی داشت توانست محبوبیت و مقبولیت خاصی در بین طراحان HTML بطور کل مجموعه 4پیدا کند که در ادامه به آن ها اشاره خواهیم کرد :پشتیبانی آن از انواع زبان HTML 1. پشتیبانی از انواع زبان ها و کاراکتر ها : یکی از مهمترین ویژگی هاي مجموعه 4فقط امکان طراحی صفحات به زبان هاي چپ به راست مثل انگلیسی و فرانسوي و HTML هاي جهان بود . تا قبل از آن با... بود . اما این نسخه امکان استفاده از زبان هاي راست به چپ و کاراکتر هاي منحصر به فرد آن ها همچون فارسی و عربی رانیز فراهم کرد .مقدماتی تا پیشرفته تالیف و ترجمه : احمد بادپی – (X)HTML آموزش۴ها stylesheet برگه هاي سبک آبشاري) : یکی دیگر از ویژگی ها پشتیبانی خوب آن از ) style sheet 2. استفاده ازبراي کنترل چگونگی نمایش صفحات توسط کاربران و طراحان بود . تا قبل از آن ، طراحان کنترل بسیار کمی بر نحوه نمایشصفحات خود داشتند .و ...) : یکی دیگر از ویژگی ها امکان گنجاندن Vbscript ، javscript 3. گنجاندن زبان هاي اسکریپتی (همچونپویا) بود . به وسیله این زبان ها می توان ) Dynamic براي خلق صفحات HTML زبان هاي اسکریپتی در داخل صفحاتبر نحوه رفتار عناصر موجود در یک صفحه وب کنترل داشت و تعیین کرد که عناصر در مقابل کنش هاي کاربر صفحه چهواکنشی از خود نشان دهند .فراهم شد امکان به کارگیري جداول براي نظم دهی و ارائه HTML یکی از عناصري که در 4.0 : (Table) 4. جدول هامنظم و قالب بندي شده اطلاعات بود .یکی از امکانات جذابی که در این نسخه فراهم شد امکان قراردادن عناصر : (MultiMedia) 5. عناصر چند رسانه ايچندرسانه اي (همچون فیلم ها ، عکس ها ، صدا ها و ...) بود که امروزه جاي خود را در بسیاري از سایت ها باز کرده اند .که از نظر ساختاري با نسخ قبلی تفاوتی نکرده است و تنها داراي یکسري اصول و قوانین خاص است تا HTML اما جدیدترین نسخهeXtensible Hyper Text Markup سرنام عبارت XHTML . است XHTML را برطرف کند HTML کمبودهايقابل توسعه( توسعه پذیر) است . HTML و به معنی Languageهمانطور که اشاره شد این نسخه فقط شامل قوانین و اصولی است که طراحان وب باید در هنگام طراحی هایشان از آن ها پیروي کنند .دستورات می بایست حتما به صورت کوچک نوشته شوند (درواقع ، XHTML به عنوان مثال یکی ازاین قوانین این است که درچنین محدودیتی را ندارد . براي HTML بوده و نسبت به حروف حساس هستند ) در حالی که خود case sensitive دستورات"XHTML و HTML با نسخ قبلی می توانید به بخش "تفاوت هاي 4.0 XHTML اطلاع بیشتر درمورد تفاوت هاي نسخهمراجعه نمایید.و کار با آن خواهیم پرداخت : HTML در ادامه بیشتر به خودزبان خلق صفحات وب است بوسیله آن می توان صفحات وبی ساخت که در آن ها از عکس ها ، فیلم ها ، موزیک ها ، : HTMLپاراگراف ها ، جداول و ... استفاده کرد .مخخف عبارت زیر می باشد : HTMLHyper Text Markup Languageکه در ادامه به توضیح هر یک از عبارت هاي به کار رفته در آن خواهیم پرداخت :یکی از زبان هاي برنامه نویسی است . (البته درادامه خواهیم HTML این عبارت نشان دهنده این است که : Language دید که بهتر است به جاي عبارت برنامه نویسی از نشانه گذاري استفاده کنیم .)یک فایل متنی ساده بیشتر نیست . (در واقع مرورگر ها این HTML این عبارت نشان می دهد که یک برنامه به زبان : Text فایل ساده متنی را خوانده و با توجه به دستورات داخل آن ، آن را به عناصر مختلف همچون عکس ها ، پاراگراف ها و .... تبدیلمی کنند .)قرار دارد . جالب است بدانید زبان هاي برنامه نویسی را به دو دسته تقسیم می کنند : liner در مقابل : Hyper و... که باید دستورات به ترتیبی که نوشته شده و می Delphi ، Pascal ، c++ به زبان هایی همچون : Liner oبایست خط به خط اجرا شوند و تا خطی از برنامه اجرا نشده خط بعدي اجرا نمی شوند و درواقع الگوي خطی دارند زبانمی گویند . Liner هايمقدماتی تا پیشرفته تالیف و ترجمه : احمد بادپی – (X)HTML آموزش۵در مقایل زبان هایی هستند که الگوي خطی ندارند و خطا دریک خط از برنامه موجب توقف کل برنامه نمی : Hyper oمی گویند . Hyper شود و درکل الگوي خطی ندارند زبان هايبر خلاف بسیاري از زبان هاي برنامه نویسی فاقد ساختار(دستور)هایی همچون ساختار شرطی HTML : Markup oبرچسب) ) Tag یا به اختصار Markup Tag ، حلقه ، توابع و ... است . در عوض این زبان از ساختار ساده اي به نامتشکیل شده است .ها هستند . Tag یک نوع دستور بیشتر ندارد و آن ها همین HTML در واقعها : Tag ساختارها از سه قسمت تشکیل می شوند : Tag1. یک علامت کوچکتر (>)2. نام تگ3. یک علامت بزرگتر (را تشکیل می دهند . به مثال زیر دقت (Element) تگ ها معمولا به صورت جفتی به کار می روند و ساختار جدیدي به نام عنصرنمایید :contentمحتواي تگ ، (openning Tag) همانطور که در مثال بالا می بینید یک عنصر از سه قسمت اصلی تشکیل می شود . تگ آغازین. (closing Tag) (که می تواند یک متن ساده ، یک عنصر دیگر و یا خالی باشد) و تگ پایانیبه ساختار تگ پایانی توجه کنید که تفاوت آن با تگ آغازین علامت / ي است که قبل از نام تگ در تگ پایانی می آید .نمایش می دهد آشنا شویم . به مثال زیر دقت کنید : (bold) که متنی را به صورت ضخیم HTML اجازه بدهید با اولین دستور ساده HTML Learning به این نکته دقت داشته باشید که هرتگی که باز می شود باید در جایی بسته شود . (البته استثنائاتی هم وجود دارد.)ساختار اصلی یک صفحه وب :ختم می شود . در واقع با این عنصر به مرورگر می شروع و به تگ بسته با تگ (HTML) هر صفحه وبپایان می شروع و با تگ پایانی روبروست ثانیا صفحه با تگ باز HTML گوییم که اولا با یک صفحه از نوعیابد .دو عنصر اصلی صفحه وجود دارد : html در داخل عنصرمقدماتی تا پیشرفته تالیف و ترجمه : احمد بادپی – (X)HTML آموزش۶سر) صفحه را مشخص می کند حاوي اطلاعاتی در مورد صفحه است . به ) head این عنصر که قسمت : عنصر و عنوان مثال می تواند شامل عنوان و توضیحاتی درمورد آنچه در قسمت بدنه آمده است باشد . این قسمت از تگو هر چیزي بین آن ها تشکیل می شود . تگ بستهمشخص کننده ي بدنه صفحه است و در واقع حاوي اطلاعاتی است که قرار است در پنجره مرورگر : عنصر و هر چیزي بین آن ها تشکیل می شود . و تگ بسته نمایش داده شود . این قسمت از تگصفحه قرار می گیرد در صفحه نمایش داده نمی شود اما هر آنچه که در head معمولا آنچه که در قسمت قرار می گیرد در صفحه نمایش داده خواهد شد . (البته خیلی از مرورگر ها از این قانون پیروي body قسمتنکرده و رفتار هاي متفاوتی از خود نشان می دهند . )با هم ساختار اصلی یک صفحه وب را تشکیل می دهند . مثال زیر ساختار اصلی یک و ، سه عنصرصفحه را نمایش می دهد :Title of the Page
This is a Paragraphذکر این نکته اهمیت دارد که وقتی عناصر شامل عناصر دیگري باشند ، توي هم قرارگرفتن آن ها باید به صورت مناسب انجام شود ،یعنی هر عنصر به طور کامل درون عنصر پدرش قرار گیرد . هر وقت که از یک تگ بسته استفاده می کنید ، این تگ بسته ، باید وابستهرا B را باز کنید ، سپس تگ B را باز کنید ، سپس تگ A به آخرین تگ بازي باشد که هنوز بسته نشده . به عیارتی دیگر ، اول تگرا ببندید . به عنوان مثال : A ببندید و در آخر تگ This paragraph contains some emphasized text. قرار ندارد : P داخل عنصر اما مثال زیر نادرست است زیرا تگ This paragraph contains some emphasized text. است . متنی که داخل این عنصر قرار می صفحه می باشد عنصر head یکی از عناصري که مخصوص قرار گرفتن در قسمتداشته باشد . (دقت کنید که متنی گیرد عنوان صفحه حاصل را مشخص می کند . هر صفحه وب حتما باید یک و تنها یک تگکه انتخاب می کنید همان چیزي است که در لیست نتایج موتور هاي جستجو نشان داده می شود. پس در انتخاب آن و مرتبط بودن باصفحه وب دقت کنید ! )مقدماتی تا پیشرفته تالیف و ترجمه : احمد بادپی – (X)HTML آموزش٧HTML صفت ها درمی توانیم کنترل بیشتري بر تگ ها داشته باشیم . بسیاري از تگ ها صفت هاي منحصر به خود را HTML ما به وسیله صفت ها دردارندکه به این صفت ها ، صفت هاي اختصاصی می گویند اما بعضی از صفات نیز بین تگ ها مشترك است و در همه آنها یک کار راانجام می دهند به این صفت ها ، صفتهاي عمومی است . صفت ها همیشه در تگ آغازین به کار می روند و از دو قسمت اصلی تشکیلمی شوند :نحوه چینش متن پاراگراف را کنترل می کند p براي تگ align نام صفتی که می خواهید کنترل کنید . مثلا صفت : Name .باعث راست چین شدن متن align براي صفت right مقداري است که براي صفت تعیین می شود . مثلا مقدار : Value پاراگراف می شود .قرار بگیرند و با علامت = به نام صفت منتسب شوند . عناصر می (double یا single ) ها همیشه باید داخل کوتیشن ها Valueتوانند چندین صفت داشته باشند اما نباید صفت ها ، مشابه باشند ! شکل کلی تعریف صفات براي عناصر به این صورت است :contentمثال زیر پاراگراف را راست چین می کند :This is a paragraphهمانطور که اشاره شد بعضی از صفت ها که به عنوان صفت هاي عمومی شناخته می شوند در تمام تگ ها کار یکسانی را انجام میدهند . در زیر برخی از این صفات و وظیفه هر یک را مشاهده می کنید :نوشته شده است به یک عنصر استفاده می شود . CSS از این صفت براي نسبت دادن کلاسی که به زبان : class براي جهت گیري از راست به چپ و rtl جهت گیري متن داخل یک عنصر را کنترل می کند. این صفت دو مقدار : dir است . ltr براي جهت گیري از چپ به راست را به عنوان مقدار می پذیرد . مقدار پیش فرض این صفت ltrاز این صفت براي تعیین یک شناسه براي یک عنصر استفاده می شود . این شناسه می بایست در صفحه یکتا باشد . از : id به یک عنصر استفاده می شود . ID این صفت همچنین براي نسبت دادن یک گزینشگراستفاده می شود . شما از این صفت معمولا براي تعیین زبان اصلی به کار رفته در صفحه و براي تگ : lang تعریف شده می توانید این صفت را براي هر نوع عنصر دیگري که زبان آن غیر از آن چیزي است که در تگخواهد بود . en,fa,fr,… است نیز استفاده کنید . مقداري که این صفت می پذیرد یکی از کد هاي زبانی مانندتعریف می شوند براي یک عنصر می CSS از این صفت براي تعیین یکسري قواعد و مقادیرشان که در زبان : style توان استفاده نمود .هنگامی که نشانگر موس بر tooltip این صفت مقداري از نوع رشته ساده را دریافت کرده و آن را به صورت : title روي عنصر قرار گیرد نمایش می دهد .Source codeدر مرورگر است که شما به راحتی می توانید تگهاي عناصر تشکیل HTML صفحات وب داراي مزیتی هستند و آن مشاهده کدهايدهنده آن صفحه را ببینید و با نحوه قرار گرفتن و تکنیکهاي بکار گرفته شده آشنا شوید. براي دیدن سورس کد یا همان کد تشکیلکلیک می کنید که بطور معمول برنامه Source در مرورگر می شوید و بر روي گزینه view دهنده صفحه وب داخل منويمقدماتی تا پیشرفته تالیف و ترجمه : احمد بادپی – (X)HTML آموزش٨را نشان می دهد که در حال حاضر فهمیدن آنها براي شما مشکل است ولی در آینده نزدیک HTML باز شده و تگهاي Notepadهیچ مشکلی براي درك کدها نخواهید داشت.در ادامه با انواع تگ ها ، صفاتشان و کاربردشان آشنا خواهیم شد .تگ هاي قالب بندي متن :چندین تگ مخصوص قالب بندي متن هاي نمایشی در صفحه وجود دارد که در ادامه به بررسی هریک از آن ها و صفات و مقادیرشانخواهیم پرداخت :: تگدر صفحه به صورت bold نمایش داده خواهد شد . در کد زیر عبارت (bold) در صفحه به صورت ضخیم b متن داخل یک عنصرضخیم نمایش داده خواهد شد :The following word uses a bold typeface.: تگدر کد زیر در صفحه به صورت مورب نمایش داده خواهد شد italic کردن متن استفاده می شود . کلمه (Italic) از این تگ براي مورب.The following word uses a italic typeface.: تگاین عنصر محتواي خود را به صورت زیر خط نمایش می دهد . این عنصر جزء عناصر منسوخ شده به شمار می رود . با این حال همهمرورگر ها از آن به خوبی پشتیبانی می کنند .: و تگ هاياین دو تگ محتواي خود را به صورت خط خورده نشان می دهند . در واقع یک خط نازك بر روي متن ایجاد می کنند .: تگنشان داده خواهد شد . بالانویس ها معمولا به اندازه نصف ارتفاع یک کاراکتر (superscript) محتواي این تگ به صورت بالانویسبالاتر از بقیه کاراکتر ها قرا ر می گیرند و کمی کوچکتر از متون اطرافشان هستند . به مثال زیر دقت کنید :Written on the 31 st February.: تگنشان داده خواهد شد . زیر نویس ها معمولا به اندازه نصف ارتفاع یک (subscript - محتواي این عنصر به صورت زیر نویس (اندیسکاراکتر بالاتر از بقیه کاراکتر ها قرا ر می گیرند و کمی کوچکتر از متون اطرافشان هستند .: تگمحتواي خود را یک اندازه بیشتر از متون 7 اندازه استاندارد براي متن وجود داشت . عنصر ، HTML در نسخه هاي قدیمی تراطرافش نمایش می دهد .The following word should be bigger than those around it.مقدماتی تا پیشرفته تالیف و ترجمه : احمد بادپی – (X)HTML آموزش٩حاصل اجراي کد فوق را در شکل زیر می بینید :استفاده از این عنصر به صورت تو در تو موجب اثر مضاعف خواهد شد :this text is written by big tagحاصل این کد هم به شکل زیر است :: تگعمل می کند و محتوایش را یک واحد کوچکتر از متون اطرافش نمایش می دهد : این عنصر دقیقا عکس عنصرThe following word should be smaller than those aroundit.استفاده از این عنصر به صورت تو در تو اثر مضاعف خواهد داشت: ایجاد تیتر ها با استفاده از تگ هايها پشتیبانی می کند . این 6 سطح با تگ هاي (Heading) از 6 سطح تیتر X(HTML)را در ,,,,,کوچکترین اندازه از بین این 6 سطح نمایش می دهند . به مثال زیر دقت نمایید :Heading 1Heading 2Heading 3Heading 4Heading 5Heading 6حاصل اجراي کد فوق در مرورگر به شکل زیر خواهد بود :هر 6 عنصر فوق داراي صفت هاي زیر هستند که در ادامه بررسی خواهیم کرد:align class id style title dir langمقدماتی تا پیشرفته تالیف و ترجمه : احمد بادپی – (X)HTML آموزش١٠را کنترل می کند . heading این صفت نحوه چینش متن داخل : align در آن قرار دارد ) قرار می گیرد . heading در سمت چپ صفحه (یا عنصري که heading : left oدر آن قرار دارد ) قرار می گیرد . heading در وسط صفحه (یا عنصري که heading : center oدر ان قرار دارد ) قرار می گیرد . heading در سمت راست صفحه (یا عنصري که heading : right oرا از هر دو طرف تراز می کند . heading متن داخل : justify oاین صفت که جز ء صفت هاي عمومی محسوب می شود رشته اي را به عنوان مقدار می پذیرد و آن را به صورت : title نمایش می دهد . tooltipبراي جهت گیري rtl ها را کنترل می کند و می تواند یکی از مقادیر heading این صفت جهت گیري متن داخل : dir براي جهت گیري چپ به راست را می پذیرد . ltr راست به چپ وبه مثال زیر دقت کنید : Left-Aligned Heading This heading uses the align attribute with a value of left. Centered Heading This heading uses the align attribute with a value of center. Right-Aligned Heading This heading uses the align attribute with a value of right. شکل زیر حاصل اجراي کد فوق را نشان می دهد :: ایجاد پاراگراف ها با استفاده از تگبراي ایجاد پاراگراف ها در صفحه استفاده می شود . معمولا همیشه پاراگراف ها از خط جدید شروع می شوند و یک فضاي P از تگخالی قبل و بعد از خود ابجاد می کنند . کد زیر سه پاراگراف ایجاد می کند : Here is a paragraph of text. Here is a second paragraph of text. Here is a third paragraph of text. این تگ از صفت هاي عمومی زیر پشتیبانی می کند :align class id style title dir langبراي ایجاد شکست خط : تگ(Empty Element) قرار می گیرد از یک خط جدید شروع می شود . این عنصر جزء عناصر تهی هر آنچه که بعد از عنصرنیز استفاده کنید که مخصوص نسخه هاي قدیمی بوده و به تگ پایانی احتیاج ندارد . شما از این عنصر می توانید به شکلمقدماتی تا پیشرفته تالیف و ترجمه : احمد بادپی – (X)HTML آموزش١١یک فاصله خالی و در ادامه یک / و در انتها یک علامت گیرد .: تگقرار دارد . به این دلیل که متن داخل این تگ به هیچ عنوان شکسته نخواهد شد مگر اینکه تگ این تگ به نوعی د رمقابل تگافقی در پنجره مرورگر scroll داخل آن قرار بگیرد . استفاده از این تگ باید با احتیاط انجام شود زیر ممکن است موجب ایجاد شود که معمولا این حالتی عذاب آور براي کاربر صفحه خواهد بود !: تگگاهی اوقات می خواهیم متنمان دقیقا به همان شکلی که نوشته می شود در صفحه نمایش داده شود و از فاصله هاي خالی ، فاصله هايقرار می گیرد دقیقا به همان شکلی که در و و شکست هاي خط چشم پوشی نشود . هر آنچه که بین تگ Tabکه متن داخل آن صفحه نوشته شده است در صفحه نشان داده خواهد شد . این تگ معمولا به همراه تگی با نام sourceنشان داده می شود به کار می رود. (فونت هاي نوع courier new همانند monospace به یکی از فونت هاي از نوعفونت هایی هستند که هر کاراکتر آن ها به یک اندازه فضا اشغال می کنند . ) monospaceبیشترین استفاده از این تگ ها در نمایش کد هاي کامپیوتري و برنامه نویسی است . در مثال زیر نمونه کدي به زبان جاوااسکریپت درقرار گرفته است که در صفحه دقیقا به همان شکل نمایش داده خواهد شد : و داخل تگfunction testFunction(strText){alert (strText)}: تگاز این تگ براي ایجاد خطوط افقی در صفحات استفاده می شود . این تگ جز تگ هاي تهی بوده و باید دقیقا به همبن شکل استفادهشود .با این صفت می توان عرض عناصر موجود در صفحه را کنترل کرد . به دو طریق می توان به این صفت : Width در آن قرار hr و دیگري بر حسب درصد که نسبت به پهناي کل صفحه (یا عنصري که px مقداردهی کرد . یکی بر حسبدارد ) سنجیده می شود .که یک رنگ را به عنوان مقدار می HTML این قاعده رنگ خط را مشخص می کند . صفاتی از این دست در : Color پذیرند را می توان به سه روش مقدار دهی نمود :1. استفاده از نام رنگ ها : ما از نام ١۶ رنگ استاندارد می توانیم براي مقداردهی به صفت ها استفاده کنیم . اینرنگ ها به شرح زیر هستند :Black , silver , gray , white , maroon , red , purple , fushia , green , lime , olive ,yellow , navy , blue , teal , aquaمقدماتی تا پیشرفته تالیف و ترجمه : احمد بادپی – (X)HTML آموزش١٢وجود دارد که به ترتیب سه رنگ قرمز ، سبز و آبی را به rgb تابعی به نام HTML در : rgb 2. استفاده از تابععنوان مقدار می پذیرد . این مقادیر یا اعداد صحیح هستند یا به صورت درصد بیان می شوند . به طور مثال :در اولین عبارت ، عدد 255 معادل % 100 است . در مد . rgb(0%,63%, یا (% 100 rgb(0,160,255)محدوده اعداد صحیح بین ٠ تا ٢۵۵ است . RGB رنگ3. استفاده از مبناي هگزادسیمال ( 16 ) رنگ ها : رنگ ها را می توان بر مبناي عبارت متناظر آن ها در مبناي 16به کار برد . در این عبارت می توان سه عدد در مبناي 16 را نوشت . عدد اول معرف رنگ قرمز ، عدد دوم معرف رنگسبز و عدد سوم معرف رنگ آبی است . دقت داشته باشید که این اعداد می توانند از دو حرف تشکیل شده باشند زیرا#rrggbb نیز می توانند تشکیل شوند فرم کلی این نوع عبارت ها به شکل F تا A اعداد در مبناي 16 از حروف#0000 معرف رنگ آبی است . ff است . براي مثال عبارت 000000 # معرف رنگ سیاه ورا به عنوان مقدار می پذیرد . px این صفت ارتفاع یک خط را کنترل می کند و می تواند یک عدد بر حسب : Size خط هایی که در صفحه ایجاد می شوند به صورت پیش فرض داراي خطی در زیر خود به عنوان سایه هستند : noshade براي حذف این سایه استفاده کنیم . boolean . ما می توانیم از این صفتنسخه هاي ) HTML به صفت هایی گفته می شود که در نسخه هاي قدیمی Boolean صفت هاي مقداري را نمی پذیرند و ذکر نام آن ها براي استفاده از آن ها کافی است مثلا : (XHTML قبل ازمی بایست این گونه صفت ها را نیز مقدار دهی کنیم و مقدار آن XHTML اما در نسخه . noshade. noshade="noshade" : ها نام خود آن ها خواهد بود مثلارا به عنوان left و center ، right محل قرار گیري خط در صفحه را کنترل می کند و می تواند یکی از موارد : align مقدار بپذیرد .: تگfirefox , google chrome متن داخل این عنصر در مرورگر به صورت چشمک زن در خواهد آمد . این تگ تنها در مرورگر هاياز آن پشتیبانی نمی کند . IE پشتیبانی می شود و opera و: تگرا قبل و تگ بسته از این تگ براي وسط چین کردن هر نوع عنصري استفاده می شود . براي این کار کافی است تگ بازرا بعد از عنصر مورد نظرتان را قرار دهید . : تگبراي ایجاد لینک (پیوند) ها a مورد استفاده قرار می گیرد عنصر لینک است . از تگ HTML یکی ازمهمترین عناصري که در صفحاتمی تواند یک متن ساده ، یک عکس یا ترکیبی از این دو باشد : a استفاده می شود . محتواي یک عنصرYou can try our lovely range of cakes.براي (shortcut) از این صفت می توان براي تعریف کردن یک کاراکتر از صفحه کلید به عنوان میانبر : accesskey دسترسی به یک لینک استفاده نمود . نحوه دسترسی و استفده از یک لینک بر اساس میانبر آن در مرور گر هاي مختلفاز کلید Google Chrome و firefox در ، Alt + accesskey از کلید هاي ترکیبی IE متفاوت است . درمقدماتی تا پیشرفته تالیف و ترجمه : احمد بادپی – (X)HTML آموزش١٣براي دسترسی به Shift + Esc از کلید هاي ترکیبی opera و در Alt + Shift + accesskey هاي ترکیبیلینکی که میانبري براي ان تعریف شده است استفاده می شود .این صفت آدرسی را که لینک به آن اشاره می کند را مشخص می کند . این آدرس می تواند آدرس صفحه اي در : href همان مسیر ، صفحه اي مربوط به سایتی دیگر ، مکانی در همان صفحه جاري و یا هر نوع فایل دیگري باشد .زبان به کار رفته در منبعی که لینک به آن اشاره می کند را مشخص می کند . این صفت یکی از کد هاي : hreflang و ... می تواند باشد . fr ، fa ، en زبانی مانندنامی براي لینک مشخص می کند . این نام باید در صفحه یکتا باشد . نامی که انتخاب می شود باید با یکی از : name 0 ، - ، _ ، : یا . (نقطه) باشد - اعداد 9 ، a-z یا A-Z شروع شده و در ادامه می تواند یکی از حروف a-z یا A-Z حروف.است رابطه صفحه مقصد با صفحه مبدا لینک را مشخص می کند . relationship این صفت که مخفف عبارت : rel است عکس صفت بالا عمل می کند و نوع رابطه صفحه مبدا با مقصد لینک reverse این صفت که مخفف عبارت : rev را مشخص می کند .صفحه کلید انجام Tab بوسیله این صفت می توان ترتیب پیمایش لینک ها در صفحه که با استفاده از کلید : tabindex می شود را مشخص کنیم . مقداري که این صفت می گیرد می تواند عددي بین 0 تا 32767 باشد .با این صفت می توان صفحه اي که لینک باید در آن باز شود را مشخص کرد و می تواند یکی از مقادیر زیر را : Target بگیرد:لینک را کاملا در صفحه اي جدید باز می کند . : _blank oلینک را در همان فریم (صفحه) اي که لینک قرار دارد باز می کند . : _self oعمل می کند ) _self صفحه را در پنجره اي بدون فریم باز می کند (غالبا مثل : _top oجاري باز می کند . frame پدر تگ frameset لینک را در : _parent oنام یک فریم (پنجره) : لینک را در پنجره اي با نام مشخص باز می کند . oآدرس) ) URL یک در تگ src یا در تگ href احتمالا همانطور که تا به اینجا متوجه شدید بعضی ازصفت ها مانندرا به عنوان مقدار می پذیرند . آدرس دهی به این گونه صفت ها معمولا به دو شکل انجام می شود . در اصل آدرس ها را به دو دستهتقسیم می کنند :آدرس هاي مطلق) : به آدرس هایی که در آنها تمام اجزاي یک آدرس اینترنتی همچون نام ) absolute URL .1نام سایت و دامنه ذکر می شود آدرس هاي مطلق گفته می شود . به ، WWW پروتکل (طرح) ، جداکننده ها ، عبارتعنوان مثال آدرس زیر یک آدرس مطلق است :http://www.google.com/index.htmآدرس هاي نسبی) : نوع دوم آدرس ها ، آدرس هاي نسبی هستند که معمولا در آن ها از آوردن نام ) relative URL .2پروتکل ، نام سایت و دامنه چشم پوشی می شود . به عنوان مثال آدرس هاي زیر نمونه هایی از آدرس هاي نسبی هستند :/images/iranflag.jpg../../download/pascal.zipنکته : معمولا براي دسترسی به فایل هایی از داخل سرور (سایت) خودمان از آدرس هاي نسبی و براي دسترسیبه فایل هایی در سرور (سایت) هاي دیگر از آدرس هاي مطلق استفاده می شود .مقدماتی تا پیشرفته تالیف و ترجمه : احمد بادپی – (X)HTML آموزش١۴در مورد آدرس هاي نسبی ذکر چند نکته ضروري است :بالاتر از فایل اصلی قرار دارد از /.. استفاده می شود . مثلا : (Directory) براي دسترسی به فایلی که در یک مسیر Click Hereاصلی سایت قرار دارد از / استفاده می شود . مثلا : directory براي دسترسی به فایلی که در GO To HomePageکه فایل اصلی قرار دارد از /. استفاده می شود . directory براي دسترسی به فایلی که در همان : تگصفحه هم قرار بگیرد براي تعریف کردن یک آدرس پایه براي head از این تگ ، که جزء تگ هاي تهی است و حتما باید در قسمتتمام لینک هاي نسبی صفحه استفاده میشود . همچنین با استفاده از این تگ می توان یک هدف مشخص براي باز شدن لینک ها را همبراي جلوگیري از کد base مشخص نمود . اگر تعداد زیادي از لینک ها در صفحه به آدرس مشخصی اشاره می کنند استفاده از تگآن باید حتما از نوع آدرس هاي href را داراست که صفت target و href نویسی اضافه پیشنهاد می شود . این تگ دو صفتمطلق) باشد . ) absolute: تگاستفاده می شود . این تگ که جزء HTML از این تگ براي تغییر رنگ ، تغییر اندازه و تغییر فونت متون و سایر عناصر متنی موجود درمحسوب می شود از صفت هاي زیر پشتیبانی می کند : inline تگ هاياز این صفت براي مشخص کردن فونت خاصی استفاده می شود . یعنی اگر بخواهیم متنی را با فونت خاصی : face همراه با این صفت استفاده می کنیم . نمایش دهیم ازتگاین صفت لیستی از فونت ها با , (کاما) از هم جدا شده اند را به عنوان مقدار می پذیرد . اگر اولین فونت بر روي سیستمکاربر نصب نبود ، فونت دوم ، فونت دوم نصب نبود فونت سوم و ... بر روي متن اعمال می شود .از این صفت براي تعیین اندازه متون استفاده می شود . به دو شکل می توان به این صفت مقدار داد : : Size 1. مقادیر مطلق: مقادیري بین 1 تا 7 که دراین مورد هر اندازه از اندازه قبلی خود بزرگتر خواهد بود .2. مقادیر نسبی : مقادیري بین 7- تا 7+ که در این صورت اندازه فونت نسبت به اندازه فونت مشخص شده در تگسنجیده خواهد شد . (در مورد این تگ درادامه خواهید خواند .) اگر عدد مشخص شده + باشد به اضافه و اگر عدد مشخص شده - باشد این معنی است که به همان تعداد به اندازه مشخص شده درکم شود . سپس بر روي متن اعمال به این معنی است که به همان تعداد از اندازه مشخص شده درگردد .از این صفت براي تعیین رنگ یک متن استفاده می شود . این صفت مقداري از انواع رنگ ها را می پذیرد و : Color رنگ متن را مشخص می کند .: تگپایه صفحه استفاده می شود . font استفاده شود براي تعیین اندازه و نوع و رنگ head از این تگ تهی که حتما باید در قسمتداخل صفحه پایه صفحه است تا تمام اندازه هاي نسبی صفحه تگ هاي font بیشترین استفاده از این تگ براي تعیین اندازهنسبت به آن سنجیده شود .تعیین نشود اندازه به صورت پیش فرض 3 در نظر گرفته می شود . در صورتی که اندازه خاصی در تگمقدماتی تا پیشرفته تالیف و ترجمه : احمد بادپی – (X)HTML آموزش١۵با همان نوع مقادیر پشتیبانی می کند جز اینکه به صفت (color ، face ، size یعنی ) این تگ از تمام صفت هاي تگآن فقط می توان مقادیر مطلق داد و مقادیر نسبی مجاز نیستند . size: inline-level(inline) و block-level عناصرکه درك درست از آن کمک شایانی به درك دیگر مفاهیم می کند تقسیم بندي عناصر به دو گروه HTML یکی از مفاهیم کلیدياست . inline و block-levelو block-level عناصري هستند که همیشه از یک خط جدید شروع می شوند و می توانند حاوي عناصر block-level عناصردیگر باشند . در واقع این گونه عناصر حالت بلاکی داشته و همیشه در ابتدا و انتهاي خود یک خط خالی ایجاد می کنند . inlineاز این دست هستند . p,h1…h6,ol,ul,pre,hr عناصري همچونعناصري هستند که معمولا براي نمایش یک متن ساده استفاده می شوند و هیچ گاه از خط جدید شروع نمی inline در مقابل عناصردیگر باشند . ) از block-level دیگر باشند (و نمی توانند حاوي عناصر inline شوند این گونه عناصر فقط می توانند شامل عناصراشاره کرد . b,I,u,em,sup,sub,big,small,a,img این نوع عناصر می توان به عناصري همچونالبته نوع سومی از عناصر نیز وجود دارند که اصلا در صفحه نمایش داده نمی شوند و تنها یکسري اطلاعات در مورد صفحه را فراهم میبراي براي اطلاعاتی در مورد صفحه و تگ تگ ، CSS براي تعریف قواعد کنند. براي مثال : تگمشخص کردن قسمت سر صفحه .: تگاز این تگ براي به حرکت درآورن متون ، عکس ها و سایر عناصر استفاده می شود . صفت هاي این تگ به شرح زیر است :را بر حسب درصد یا پیکسل مشخص می کند . marquee عرض محدوده : Width را بر حسب درصد یا پیکسل مشخص می کند . marquee ارتفاع محدوده : Height را مشخص می کند . به سه روشی که قبلا به آن اشاره شده است می marquee رنگ پس زمینه محدوده : Bgcolor توان به این صفت مقدار داد .را مشخص می کند که می تواند یکی از مقادیر زیر باشد : marquee نحوه رفتار یا حرکت محتویات : Behavior متن از یک طرف وارد و از طرف دیگر خارج می شود . : Scroll oمتن از یک طرف وارد و در طف دیگر می ایستد : Slide oیک حرکت رفت و برگشتی در سطح آن خواهد داشت . marquee متن (محتویات) داخل : Alternate oرا مانند قدم زدن درنظر بگیریم این صفت فاصله بین هر marquee اگر حرکت متن بوسیله تگ : Scrollamount را می پذیرد px قدم را کنترل می کند . این صفت مقداري عددي بر حسباین صفت تاخیر زمانی بین هر قدم را بر حسب میلی ثانیه مشخص می کند . مثلا مقدار ١٠٠٠ براي : Scrolldelay این صفت به معنی تاخیر یک ثانیه اي براي هر قدم خواهد بود .تعداد تکرار حرکت متن را کنترل می کند و می تواند یک عدد صحیح باشد . درصورتی که بخواهید حرکت بی : Loop قرار بدهید . infinite نهایت بار تکرار شود آن را برابر با یک عدد منفی (مثلا 1-) یا عبارترا مشخص می کند و می تواند یکی از مقادیر زیر باشد : marquee جهت حرکت محتویات : Direction حرکت به سمت بالا : Up oحرکت به سمت پایین : Down oحرکت به سمت راست : Right oمقدماتی تا پیشرفته تالیف و ترجمه : احمد بادپی – (X)HTML آموزش١۶حرکت به سمت چپ : Left oیا در صد px نسبت به عناصر اطراف را بر حسب marquee میزان فاصله طرف هاي راست و چپ محدوده : hspace کنترل می کند.یا در صد px نسبت به عناصر اطراف را بر حسب marquee میزان فاصله طرف هاي بالا و پایین محدوده : vspcace کنترل می کند.را در نظر نمی گیرند و آن را به 60 گرد scrolldelay معمولا مرورگر ها مقادیر کمتر از 60 براي صفت : truespeed نیز هست boolean که جزء صفت هاي truespeed کرده و سپس اعمال می کنند . ما می توانیم با به کارگیري صفتاز این تبدیل جلوگیري نمایید . در واقع با استفاده از این صفت می توانیم مرورگر ها را مجبور کنیم تا دقیقا همان عددي رامشخص کرده ایم در حرکت متن تاثیر بدهد . scrolldelay که در صفت: تگبی شک یکی از جذابترین عناصر موجود در صفحات وب که به قول معروف به صفحات روح می بخشد و آن ها را از یکنواختی خارج میکه جزء تگ هاي تهی است استفاده می شود : کند عنصر عکس است . براي قرار دادن عکس ها از تگصفت هاي این تگ به شرح زیر است :این صفت نحوه قرار گیري عکس نسبت به متون و عناصر اطرافش در صفحه را کنترل می کند که می تواند : align مقادیر زیر را بپذیرد :عکس را در سمت راست متون اطرافش قرار می دهد . : right oعکس را در سمت چپ متون اطرافش قرار می دهد . : left oقسمت بالاي عکس با خطی که در آن قرار دارد تراز خواهد شد . : top oمیانه هاي عکس با خطی که درآن قرار دارد تراز خواهد شد . : middle oقسمت پایینی عکس با خطی که در آن قرار دارد تراز خواهد شد . : bottom oمتنی را به عنوان مقدار می پذیرد و در صورتی که به هر دلیلی عکس مورد نظر پیدا نشود به جاي عکس نمایش داده : alt براي عکس هایتان استفاده کنید . حتی خالی !!! alt شما باید حتما از صفت XHTML خواهد شد . در نسخهمشخص می کند . px میزان ضخامت حاشیه عکس را با عددي بر حسب : border یا درصد بیان می کند . px ارتفاع عکس را بر حسب : height میزان فاصله سمت چپ و راست عکس نسبت به عناصر اطراف را کنترل می کند . : hspace است و آدرس عکسی که می خواهیم نمایش داده شود را مشخص می img این صفت اصلی ترین صفت براي تگ : src کند . مقدار این صفت می تواند یکی از انواع آدرس هاي نسبی و مطلق باشد .میزان فاصله سمت بالا و پایین عکس نسبت به عناصر اطراف را کنترل می کند . : vspace یا درصد بیان می کند . px عرض عکس را بر حسب : width : تگقرار بگیرد براي فراهم کردن یکسري اطلاعات در مورد محتواي صفحه استفاده می head از این تگ تهی که باید همیشه در قسمتشود . مثلا اینکه نویسنده صفحه چه کسی بوده ، تکنولوژ یهاي به کار رفته در آن ، تاریخ تولید و انقضاي صفحه ، برنامه تولید کنندهصفحه و ... . این اطلاعات می توانند توسط مرورگر ها براي تشخیص چگونگی نمایش محتوا یا توسط موتور هاي جستجو براي ذخیرهمقدماتی تا پیشرفته تالیف و ترجمه : احمد بادپی – (X)HTML آموزش١٧می توانیم یکسري کلمات کلیدي meta کردن اطلاعات صفحه در پایگاه داده آن ها مورد استفاده قرار بگیرد . به عنوان مثال با تگمرتبط با صفحه را به موتور هاي جستجو معرفی کنیم .می توانیم استفاده کنیم . این تگ از صفت هاي زیر پشتیبانی می کند : head درقسمت meta ما از هر تعداد تگمی خواهیم فراهم کنیم را مشخص می کند . مقداري که به این meta نامی براي نوع اطلاعاتی که بوسیله تگ : Name صفت می توان داد می تواند هر چیزي باشد .دارد . در واقع این صفت name نیز هست ارتباط نزدیکی با صفت meta این صفت که صفتی الزامی براي تگ : Content meta نامی براي آن انتخاب شده است . در مثال زیر چند نمونه از کاربرد تگ name حاوي اطلاعاتی است که در صفتهمراه با این دو صفت را مشاهده می کنید :این دستور یکسري کلمات کلیدي براي صفحه را مشخص می کند .learning HTML and HTML">این دستور یک توضیح کلی در مورد محتواي صفحه را مشخص می کند .این صفت به صورت اختصاصی اطلاعاتی از صفحه را در اختیار سرور قرار می دهد . مثلا یکی از کاربرد : http-equiv صفحه براي سرور ها (و حتی مرورگر هاست). این صفت مقادیر encoding هاي این صفت براي مشخص کردن نوعزیادي را می پذیرد که پرکاربرد ترین آن ها به شرح زیر است :است و نوع text/html صفحه که غالبا Mime Type براي مشخص کردن نوع : content-type .1که غالبا UTF- صفحه را برابر 8 encoding صفحه استفاده می شود . به عنوان مثال دستور زیر نوع encodingبراي صفحات فارسی هم استفاده می شود قرار می دهد :با استفاده از این مقدار می توان مشخص کرد که صفحه بعد ازمدت زمانی معین خود به خود : refresh .2خواهد کرد : refresh بارگذاري مجدد شود. دستور زیر صفحه را بعد از 5 ثانیهاستفاده کنیم . عکس name استفاده می کنید نباید از صفت http-equiv نکته : هنگامی که از صفت این حالت نیز باید رعایت شود.: HTML درج توضیحات درنیز وجو دارد . معمولا از توضیحات در HTML همانند بسیاري از زبان هاي برنامه نویسی امکان گنجاندن توضیحات در صفحاتبراي خواناتر کردن کد ها و مشخص کردن نفاط ابتدایی و انتهایی بخش هاي صفحه استفاده می شود . یک توضیح در HTMLبه شکل زیر است : HTMLبا !> شروع و به تعبیر خواهد شد . comment قرار می گیرد توسط مرورگر ها به عنواندقت داشته باشید که بین دو -- ابتدایی و انتهایی هیچ -- نباید قرار بگیرد . به عنوان مثال دستور زیر نادرست است :مقدماتی تا پیشرفته تالیف و ترجمه : احمد بادپی – (X)HTML آموزش١٨Take the next right.را comment می تواند حاوي بیش از یک متن به عنوان توضیحات باشد . به عنوان مثال دستور زیر دو comment یک دستورتعریف می کند :Take the next right.دیگر است . comment یک Castle و عبارت comment یک Look out for در دستور فوق عبارتصحیح باید همیشه مضربی از 4 باشد ! comment دقت داشته که تعداد کاراکتر هاي – در یک HTML لیست ها دراستفاده می شود و امکان نمایش متون و حتی انواع دیگر عناصر به صورت لیست HTML یکی دیگر از انواع عناصري که در صفحاترا فراهم می کند عناصر لیست هستند . لیست ها به سه دسته اصلی زیر تقسیم یندي می شوند :: (unordered list) 1. لیست هاي نامرتبدر این نوع لیست ها ترتیب قرار گیري عناصر لیست (که غالبا متون ساده) هستند مهم نبوده و معمولا براي لیست کردن آن ها ازهاي دایره اي توپر ، ساده یا مربع استفاده می شود . bullet: (ordered list) 2. لیست هاي مرتبدر این نوع لیست ها ترتیب قرار گیري عناصر لیست مهم بوده و براي نمایش ترتیب آن ها از اعداد یا حروف انگلیسی یا رومیاستفاده می شود .: (Definition List) 3. لیست هاي تعریفیمقدماتی تا پیشرفته تالیف و ترجمه : احمد بادپی – (X)HTML آموزش١٩از این گونه لیست ها هنگامی که می خواهیم یکسري از آیتم هایی که یک بخش عنوان و یک توضیح براي آن عنوان دارند رانمایش دهیم استفاده می کنیم .در ادامه با تگ هاي مربوط به هر یک از انواع لیست ها خواهیم پرداخت :براي ایجاد لیست هاي مرتب تگ(list Item مخفف ) از این تگ براي ایجاد لیست هاي مرتب استفاده می شود . براي ایجاد آیتم هاي لیست ها می بایست از تگاستفاده نمود . این تگ از صفت هاي زیر پشتیبانی می کند : در داخل تگکنار هر آیتم را مشخص نمود . این صفت مقادیر زیر را bullet با استفاده از این صفت می توان می توان نوع : Type می پذیرد :براي نمایش حروف کوچک انگلیسی : a oبراي نمایش حروف بزرگ انگلیسی : A oبراي نمایش حروف کوچک رومی : i oبراي نمایش حروف بزرگ رومی : I oبراي آیتم ها (مقدار پیش فرض) bullet 1 : براي نمایش اعداد به عنوان otype این صفت مشخص می کند که شماره گذاري لیست ما باید از چندمین کاراکتر از انواعی که در صفت : Start به معنی کاراکتر start مقدار 3 براي صفت type='A' مشخص شده است شروع شود . به عنوان مثال اگر مقدار صفتخواهد بود . Cاین صفت بولین موجب فشرده نمایش داده شدن آیتم هاي لیست خواهد شد . البته این صفت در هیچ : Compact مرورگري پشتیبانی نمی شود .براي ایجاد لیست هاي نامرتب: تگدر داخل تگ از این تگ براي ایجاد لیست هاي نامرتب استفاده می شود . براي ایجاد آیتم هاي لیست ها می بایست از تگاستفاده نمود . این تگ از صفت هاي زیر پشتیبانی می کند : کنار هر آیتم را مشخص نمود . این صفت مقادیر زیر را bullet با استفاده از این صفت می توان می توان نوع : Type می پذیرد :نمایش می دهد bullet یک دایره توخالی را به عنوان : circle oنمایش می دهد bullet یک دایره توپر (سیاه رنگ) را به عنوان : Disc oنمایش می دهد . bullet یک مربع توپر را به عنوان : Square oاین صفت بولین موجب فشرده نمایش داده شدن آیتم هاي لیست خواهد شد . البته این صفت در هیچ : Compact مرورگري پشتیبانی نمی شود .براي ایجاد لیست هاي تعریفی : تگاستفاده میشود . هر لیست تعریفی ا زچند عنوان و توضیحات (definition List مخفف ) براي ایجاد لیست هاي تعریفی از تگو براي ایجاد هر توضیح از (definition title(term) مخفف ) آن عنوان تشکیل می شود . براي ایجاد هر عنوان از تگپشتیبانی می کند . در compact فقط از صفت استفاده می شود . تگ (definition describtion مخفف ) تگزیر شما می توانید یک لیست تعریفی را مشاهده نمایید :مقدماتی تا پیشرفته تالیف و ترجمه : احمد بادپی – (X)HTML آموزش٢٠Spamunsolicited email sent in the hope of increasing sales ofsome product, or simply for the purposes of annoying peopleSpammersomeone who sends out spam email and therefore deserves todevelop a nasty incurable disease of some kindSpam Filtera tool used in email to 'filter out' likely spam messages,usually placing them in a dedicated junk messages folderor similarحاصل اجراي کد فوق درمرورگر به صورت زیر خواهد بود :: تگو از این عنصر براي مشخص کردن آیتم هاي لیست هاي مرتب و نامرتب استفاده می شود . غالبا این تگ داخل تگ هاياستفاده می شود . این تگ از صفت هاي زیر پشتیبانی می کند : تگ type مربوط به یک آیتم لیست به غیر از آن نوعی که در صفت bullet از این صفت براي تغییر دادن نوع : type می همان مقادیري را که در تگ تنظیم شده است استفاده می شود . این صفت براي تگ ol و ul هايگیرد به عنوان مقدار می پذیرد . به مثال زیر و حاصل آن در مرورگر دقت کنید :EggsCheeseMilkPapadumsTickle-me ElmoDr Who Remote Control Dalekحاصل به صورت زیر خواهد بود :مقدماتی تا پیشرفته تالیف و ترجمه : احمد بادپی – (X)HTML آموزش٢١از این صفت براي تغییر دادن عدد کنار یک آیتم از لیست استفاده می شود . در واقع ما می توانیم ترتیب نمایش : value اعداد کنار یک آیتم را با این صفت به هم بزنیم . این صفت یک عدد صحیح را به عنوان مقدار می پذیرد . به مثال زیردقت کنید :EggsCheeseMilkPapadumsTickle-me ElmoDr Who Remote Control Dalekحاصل اجراي کد فوق به شکل زیر خواهد بود :: HTML جداول درمحسوب می شوند و معمولا براي نظم دهی به سایر عناصر موجود در صفحه استفاده می HTML جداول یکی از مهمترین عناصر درشوند .ساختار کلی یک جدول در مثال زیر آمده است :Account TypeInterest RateSmartFrom 2%Young SaverFrom 1.6%حاصل اجراي کد فوق در مرورگر به شکل زیر خواهد بود :از ردیف هایی که سلول ها در آن ها قرار دارند تشکیل می شوند . HTML در حالت کلی می توان گفت که جدول ها دردر ادامه با تگ هاي مرتبط با ساختار جداول بیشتر آشنا خواهیم شد :مقدماتی تا پیشرفته تالیف و ترجمه

نظرات شما عزیزان:

نام :

آدرس ایمیل:

وب سایت/بلاگ :

متن پیام:

نظر خصوصی

 کد را وارد نمایید:

 

 

 

عکس شما

آپلود عکس دلخواه: